<ng-container *ngIf="selectedSession">
  <div class="option-bar {{compact ? 'compact': ''}}" [ngClass]="selectedSession.type.toLowerCase() + '-opt-bar'">
    <div class="opt-bar-session-button">
      <a class="icon-button start-session" (click)="startSession();" *ngIf="selectedSession.status === eSessionStatus.inactive"><i
        class="moon-Play-filled">
        <div class="dark-theme-filling"></div>
      </i><span>{{compact ? '' : '&nbsp;Start Session'}}</span></a>
      <a class="icon-button stop-session" (click)="stopSession();"
         *ngIf="selectedSession.status === eSessionStatus.active || selectedSession.status === eSessionStatus.pending"><i class="moon-Stop">
        <div class="dark-theme-filling"></div>
      </i><span>{{compact ? '' : '&nbsp;Stop Session'}}</span></a>
    </div>
    <div
      [ngClass]="(selectedSession.type === eSessionType.awsIamUser && selectedSession.status !== eSessionStatus.active) ? 'iam-session-selected' : ''"
      class="opt-bar-middle-section">
      <div class="opt-bar-middle-left-buttons">

        <ng-container
          *ngIf="selectedSession.type === eSessionType.awsSsoRole || selectedSession.type === eSessionType.awsIamRoleFederated || selectedSession.type === eSessionType.awsIamRoleChained">
          <a class="icon-button open-web-console" [class.disabled]="isWebConsoleFetching" (click)="openAwsWebConsole();" matTooltip="Open Web Console">
            <i class="moon-Open-Web-Console"></i>
          </a>
        </ng-container>
        <a class="icon-button" *ngIf="selectedSession.type !== eSessionType.azure" (click)="changeRegionModalOpen();" matTooltip="Change Region"><i
          class="moon-Region"></i></a>
        <a class="icon-button" *ngIf="selectedSession.type !== eSessionType.azure" (click)="changeProfileModalOpen();"
           matTooltip="Change Named Profile"><i class="moon-User"></i></a>
        <a class="icon-button" (click)="ssmModalOpen();" *ngIf="selectedSession.type !== eSessionType.azure" matTooltip="View SSM sessions"><i
          class="moon-Server"></i></a>
        <a class="icon-button"
           *ngIf="(selectedSession.type === eSessionType.awsIamUser || selectedSession.type === eSessionType.awsIamRoleFederated || selectedSession.type === eSessionType.awsIamRoleChained) && !isLeappTeamUser"
           (click)="editCurrentSession();" matTooltip="Edit Session"><i class="moon-Edit"></i></a>
      </div>
      <span class="separator"></span>

      <div class="opt-bar-middle-right-buttons">
        <a class="icon-button" (click)="pinSession();" *ngIf="!isPinned" matTooltip="Pin Session"><i class="moon-Pin"></i></a>
        <a class="icon-button" (click)="unpinSession();" *ngIf="isPinned" matTooltip="Unpin Session"><i class="moon-Pin-filled"></i></a>
        <ng-container *ngIf="selectedSession.type !== eSessionType.awsSsoRole && selectedSession.type !== eSessionType.azure">
          <a class="icon-button" (click)="deleteSession();" matTooltip="Delete Session"><i class="moon-Delete"></i></a>
        </ng-container>
      </div>
    </div>

    <div class="session-name">1 selected</div>
  </div>
</ng-container>
